<template>
  <div class="index-page">
    <div :class="overflowY==1?'poTop_ovhide poTop':'poTop'" ref="messagesContainer">
      <p @click="clickNUm()">scrollTop</p>
      <ul>
        <li v-for="(item,index) in 8">top测试数据{{index}}</li>
        <li ref="piediv">asdadadssadas</li>
        <li v-for="(item,index) in 40">bottom数据{{index}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    name:"po_hexiaoLB",
    data(){
      return{
        overflowY:0,
      }
    },
    mounted() {

    },
    methods:{
      clickNUm(){
        this.overflowY=1;
        this.$refs.messagesContainer.scrollTop=this.$refs.piediv.getBoundingClientRect().top-100
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .index-page{
    background-color: #fff;

    .poTop{
      height: 76vh;
      overflow-y: hidden;
      p{
        font-size: 0.6rem;
        text-align: center;
        padding:0.2rem ;
      }
      ul{

        li{
          text-align: center;
          font-size: 0.4rem;
          padding: 0.15rem 0;
        }
        .liclass{
            color: red;
        }
      }
    }
    .poTop_ovhide{
      overflow-y: auto;
    }
  }
</style>
